<template>
	<view>
		<header-bar :title=titleName>
			<uni-icons type="undo" size="23" slot="back"></uni-icons>
		</header-bar>
		<view class="example">
			<uni-forms ref="baseForm" :modelValue="baseFormData">
				<uni-forms-item label="物品名称" required>
					<uni-easyinput v-model="baseFormData.name" placeholder="请输入物品名称" />
				</uni-forms-item>
				<uni-forms-item label="物品分类" required>
					<uni-data-select v-model="value" :localdata="range" @change="change" :clear="false">
					</uni-data-select>
				</uni-forms-item>
				<uni-forms-item label="封面展示" required>
					<uni-file-picker limit="9" title="最多选择9张图片"></uni-file-picker>
				</uni-forms-item>
				<uni-forms-item label="视频展示" required>
					<uni-file-picker limit="9" file-mediatype="video" title="最多选择9个视频"></uni-file-picker>
				</uni-forms-item>
				<uni-forms-item label="使用情况">
					<uni-easyinput v-model="baseFormData.introduction" placeholder="请输入自我介绍" />
				</uni-forms-item>
				<uni-forms-item label="起拍价格" required>
					<uni-easyinput v-model="baseFormData.price" placeholder="请输入价格" />
				</uni-forms-item>
				<uni-forms-item label="拍价后截止时间" required>
					<uni-datetime-picker type="datetime" return-type="timestamp"
						v-model="baseFormData.datetimesingle" />
				</uni-forms-item>
				<uni-forms-item label="崭新度" required>
					<uni-data-select v-model="value" :localdata="range1" @change="change" :clear="false">
					</uni-data-select>
				</uni-forms-item>
				<uni-forms-item label="交易形式" required>
					<uni-data-checkbox v-model="baseFormData.sex" :localdata="sexs" />
				</uni-forms-item>
				<uni-forms-item label="物品所在地">
					<uni-data-picker placeholder="请选择地址" popup-title="请选择所在地区" :localdata="dataTree" v-model="classes"
						@change="onchange" @nodeclick="onnodeclick" @popupopened="onpopupopened"
						@popupclosed="onpopupclosed">
					</uni-data-picker>
				</uni-forms-item>
			</uni-forms>
			<button type="primary" @click="submit">提交</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				titleName:"公益拍卖",
				classes: '1-4',
				dataTree: [{
						text: "山西省",
						value: "1-0",
						children: [{
								text: "太原市",
								value: "1-1",
								children: [{
										text: "小店区",
										value: "1-7"
									},
									{
										text: "迎泽区",
										value: "1-8"
									},
								]
							},
							{
								text: "晋中市",
								value: "1-2",
								children: [{
										text: "太谷区",
										value: "1-3",
										children: [{
												text: "晋中信息学院",
												value: "1-4"
											},
											{
												text: "山西农业大学信息学院",
												value: "1-5"
											},
										]
									},
									{
										text: "榆次区",
										value: "1-6"
									},
									{
										text: "和顺县",
										value: "1-13"
									},
								]
							},
							{
								text: "大同市",
								value: "1-9",
								children: [{
										text: "阳高县",
										value: "1-10"
									},
									{
										text: "灵丘县",
										value: "1-6"
									},
								]
							},
						]
					},
					{
						text: "北京市",
						value: "2-0",
						children: [{
								text: "朝阳区",
								value: "2-1"
							},
							{
								text: "海淀区",
								value: "2-2"
							},
							{
								text: "大兴区",
								value: "2-2"
							},
						]
					},
					{
						text: "河北省",
						value: "3-0",
						children: [{
								text: "石家庄",
								value: "3-1",
								children: [{
										text: "行唐县",
										value: "3-3"
									},
									{
										text: "深泽县",
										value: "3-4"
									}
								]
							},
							{
								text: "秦皇岛",
								value: "3-2",
								children: [{
										text: "卢龙县",
										value: "3-5"
									},
									{
										text: "昌黎县",
										value: "3-6"
									}
								]
							}
						]
					},
					{
						text: "山东省",
						value: "4-0"
					},
					{
						text: "上海市",
						value: "5-0"
					},
				],
				imageStyles: {
					width: 64,
					height: 64,
					border: {
						radius: '50%'
					}
				},
				listStyles: {
					// 是否显示边框
					border: true,
					// 是否显示分隔线
					dividline: true,
					// 线条样式
					borderStyle: {
						width: 1,
						color: 'blue',
						style: 'dashed',
						radius: 2
					}
				},
				fileLists: [{
					url: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/b7c7f970-517d-11eb-97b7-0dc4655d6e68.jpg',
					extname: 'png',
					name: 'shuijiao.png'
				}, {
					url: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/b7c7f970-517d-11eb-97b7-0dc4655d6e68.jpg',
					extname: 'png',
					name: 'uniapp-logo.png'
				}, {
					url: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/b7c7f970-517d-11eb-97b7-0dc4655d6e68.jpg',
					extname: 'png',
					name: 'shuijiao.png'
				}],
				value: 0,
				range: [{
						value: 0,
						text: "耕作"
					},
					{
						value: 1,
						text: "收获"
					},
					{
						value: 2,
						text: "排灌"
					},
					{
						value: 3,
						text: "其他"
					},
				],
				range1: [{
						value: 0,
						text: "九成新"
					},
					{
						value: 1,
						text: "七成新"
					},
					{
						value: 2,
						text: "五成新"
					},
					{
						value: 3,
						text: "三成新"
					},
					{
						value: 4,
						text: "半成新"
					},
				],
				// 基础表单数据
				baseFormData: {
					name: '园艺工具套装家用种植工具箱',
					introduction: '买回来只用里面一个工具',
					price: '89.9',
					sex: 0,
					datetimesingle: 1655529992399
				},
				// 单选数据源
				sexs: [{
					text: '线下邮寄交易形式均可',
					value: 0
				}, {
					text: '只接受线下交易形式',
					value: 1
				}, {
					text: '只接受邮寄交易形式',
					value: 2
				}],
				// 分段器数据
				current: 0,
				// 校验表单数据
				valiFormData: {
					name: '',
					introduction: '',
				},
				// 校验规则
				rules: {
					name: {
						rules: [{
							required: true,
							errorMessage: '物品名称不能为空'
						}]
					}
				}
			}
		},
		computed: {
			// 处理表单排列切换
			alignment() {
				if (this.current === 0) return 'left'
				if (this.current === 1) return 'top'
				return 'left'
			}
		},
		onLoad() {},
		methods: {
			onnodeclick(e) {
				console.log(e);
			},
			onpopupopened(e) {
				console.log('popupopened');
			},
			onpopupclosed(e) {
				console.log('popupclosed');
			},
			onchange(e) {
				console.log('onchange:', e);
			},
			change(e) {
				console.log("e:", e);
			},
			onClickItem(e) {
				console.log(e);
				this.current = e.currentIndex
			},
			add() {
				this.dynamicLists.push({
					label: '域名',
					rules: [{
						'required': true,
						errorMessage: '域名项必填'
					}],
					id: Date.now()
				})
			},
			del(id) {
				let index = this.dynamicLists.findIndex(v => v.id === id)
				this.dynamicLists.splice(index, 1)
			},
			submit: function() {
				uni.navigateTo({
					url: '/subpkg/success/success'
				})
			},
		}
	}
</script>

<style lang="scss">
	.example {
		padding: 15px;
		background-color: #fff;
	}

	.segmented-control {
		margin-bottom: 15px;
	}

	.button-group {
		margin-top: 15px;
		display: flex;
		justify-content: space-around;
	}

	.form-item {
		display: flex;
		align-items: center;
	}

	.button {
		display: flex;
		align-items: center;
		height: 35px;
		margin-left: 10px;
	}

	button[type=primary] {
		background-color: rgb(0, 208, 208);
	}

	.text {
		font-size: 12px;
		color: #666;
		margin-top: 5px;
	}

	.uni-stat__select {
		padding: 0 !important;
	}

	.uni-select__input-box {
		width: 525rpx;
		border: none !important;
	}

	.uni-stat__actived {
		outline: none !important;
	}

	.title {
		font-size: 14px;
		font-weight: bold;
		margin: 20px 0 5px 0;
	}

	.data-pickerview {
		height: 400px;
		border: 1px #e5e5e5 solid;
	}

	.popper__arrow {
		top: -6px;
		left: 50%;
		margin-right: 3px;
		border-top-width: 0;
		border-bottom-color: #EBEEF5;
	}

	.popper__arrow {
		top: -6px;
		left: 50%;
		margin-right: 3px;
		border-top-width: 0;
		border-bottom-color: #EBEEF5;
	}
</style>
